<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自如家政服务主页</title>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body style="background-color: #80bdff;margin: 0">
<div id="app">
    <el-header class="container-fluid" style="padding: 0px">

        <!--导航栏-->
        <el-menu :default-active="activeIndex" background-color="#545c64"
                 text-color="#fff"
                 active-text-color="#ffd04b" class="el-menu-demo" mode="horizontal" @select="handleSelect">

            <!--<el-menu-item index="0" style="width:50%" ></el-menu-item>-->
            <el-menu-item style="width:50%" disabled></el-menu-item>
            <el-menu-item index="1"><a href="/">首页</a></el-menu-item>
        </el-menu>

        <!--<div class="block">
            <span class="demonstration"></span>
            <el-image src="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg"></el-image>
        </div>-->
        <!--走马灯-->
        <div class="col-lg-8">
            <div class="block">
                <template>
                    <el-carousel :interval="4000" type="card" height="400px">
                        <el-carousel-item v-for="item in pics" :key="item.id">
                            <img  style="width: 787px;height: 370px" class="pic" :src="item.url"/>
                        </el-carousel-item>
                    </el-carousel>
                </template>
            </div>
        </div>
        <!--走马灯-->

        <div class="row">
            <el-col :span="6" :offset="1">
                <div class="block">
                    <span style="">整洁</span>
                    <el-image
                            style="width: 500px; height: 600px"
                            src="https://webimg.ziroom.com/7ec36f1c-d8db-4d51-b4c0-7818c7abd7e3.png"
                    ></el-image>
                </div>
            </el-col>
            <el-col :span="6" :offset="2">
                <div class="block">
                    <span>立即预约,整洁新家!</span>
                    <el-button type="success" icon="el-icon-check" circle @click="openBookForm"></el-button>
                    <el-image
                            style="width: 500px; height: 600px"
                            src="https://webimg.ziroom.com/71072851-f61e-4259-a5a4-f6fd838d167a.png"
                    ></el-image>
                </div>
            </el-col>
            <el-col :span="6" :offset="2">
                <div class="block">
                    <span>效率</span>
                    <el-image
                            style="width: 500px; height: 600px"
                            src="https://webimg.ziroom.com/062b252e-6df5-456e-ad56-f6841df93356.png"
                    ></el-image>
                </div>
            </el-col>

        </div>
        <!--预留-->
        <div></div>
        <!--预约窗口-->
        <!--预约窗口-->
        <el-dialog title="预约窗口"
                   :visible.sync="openBookFormVisible"
                   :close-on-click-modal="false"
                   @close="closeBookForm"
        >

            <div><!--预约订单-->
                <el-form :model="addBookForm" size="small" :rules="addBookRules" ref="addBookRef"
                         :label-position="labelPosition">

                    <div class="block">
                        <el-form-item label="请选择地址:">

                            <!-- 上海市 -->
                            <el-input v-model="input" placeholder="请输入内容" style="width:10%" disabled></el-input>

                            <!--上海市的区域-->
                            <el-select v-model="areaInfo" placeholder="请选择" @change="searchStreets">
                                <el-option
                                        v-for="item in areasList"
                                        :key="item.code"
                                        :label="item.name"
                                        :value="item.code"
                                >
                                </el-option>
                            </el-select>

                            <!--上海区域的街道-->
                            <el-select v-model="streetsInfo" placeholder="请选择">
                                <el-option
                                        v-for="item in streetsList"
                                        :key="item.code"
                                        :label="item.name"
                                        :value="item.code"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </div>

                    <div class="block">
                        <el-form-item label="请输入详细地址:">
                            <!--<span class="demonstration">请选择地址:</span>-->
                            <el-input
                                    placeholder="您的地址"
                                    v-model="addBookForm.Address"
                                    style="width: 500px"
                                    clearable>
                            </el-input>
                        </el-form-item>
                    </div>
                    <div class="block">
                        <el-form-item label="请选择预约日期:">
                            <!--<span class="demonstration">请选择预约日期:</span>-->
                            <el-date-picker
                                    v-model="addBookForm.BookDay"
                                    type="date"
                                    placeholder="选择日期"
                                    value-format="yyyy-MM-dd"
                                    :picker-options="pickerOptions0"
                            >
                            </el-date-picker>
                        </el-form-item>
                    </div>
                    <div>
                        <!--<span class="demonstration">开始时间:</span>-->
                        <el-form-item label="开始时间:">
                            <el-time-select
                                    placeholder="起始时间"
                                    v-model="addBookForm.createDate"
                                    format='HH:mm'
                                    @change="cleanTime"
                                    :picker-options="{
      start: '08:00',
      step: '02:00',
      end: '14:00'
    }">
                            </el-time-select>
                        </el-form-item>
                        <el-form-item label="结束时间:">
                            <!--<span class="demonstration">结束时间:</span>-->
                            <el-time-select
                                    placeholder="结束时间"
                                    format='HH:mm'
                                    v-model="addBookForm.lastModifyDate"
                                    @change="resultPrice"
                                    :picker-options="{
      start: '08:00',
      step: '02:00',
      end: '16:00',
      minTime: addBookForm.createDate
    }">
                            </el-time-select>
                        </el-form-item>
                    </div>
                </el-form>
            </div>

            <div>
                <span style="color: red">价格为:￥
                    {{addBookForm.price}}
                </span>
            </div>

            <el-button @click="addBookInfo">提交</el-button>
            <el-button @click="closeBookForm">取 消</el-button>

        </el-dialog>

    </el-header>
</div>
</body>
<script>
    let vueApp = new Vue({
        el: "#app",
        data: {
            //只限于上海
            input: '上海市',

            areasList: '',
            streetsList: '',
            areaInfo: '',
            streetsInfo: '',


            labelPosition: 'right',
            addBookRef: '',
            addBookForm: {
                Address: '',
                createDate: '',
                lastModifyDate: '',
                BookDay: '',
                price: '',
            },
            addBookRules: {},
            openBookFormVisible: false,
            activeIndex: '1',
            activeIndex2: '1',
            pics: [
                {url: "http://139.224.186.148:10001/imgs/CLR_7dd5641b3f2246a391c6ac1062772ffd.jpg", id: "1"},
                {url: "http://139.224.186.148:10001/imgs/bk0001.jpg", id: "2"},
                {url: "https://img0.baidu.com/it/u=2989060915,1485075111&fm=253&fmt=auto&app=138&f=PNG?w=429&h=259", id: "3"},
                {url: "http://139.224.186.148:10001/imgs/bk0001.jpg", id: "4"},
                {url: "http://139.224.186.148:10001/imgs/CLR_7dd5641b3f2246a391c6ac1062772ffd.jpg", id: "5"},
                {url: "https://img0.baidu.com/it/u=2989060915,1485075111&fm=253&fmt=auto&app=138&f=PNG?w=429&h=259", id: "6"},
            ],
            pickerOptions0: {
                disabledDate(time) {
                    return time.getTime() < Date.now();//如果没有后面的-8.64e7就是不可以选择今天的
                }
            },
        },
        methods: {

            //查找街道区域联动
            searchStreets() {
                let url = '/streets/getStreetsByArea'
                axios.get(url, {
                    params: {
                        code: this.areaInfo
                    }
                }).then((res) => {
                    console.log(res);
                    this.streetsList = res.data;
                    this.streetsInfo = '';
                })

            },


            //查找区列表
            searchAreas() {
                let url = '/areas/getAreas'
                axios.get(url).then((res) => {
                    console.log(res);
                    this.areasList = res.data;
                })
            },

            resultPrice() {
                let time = this.addBookForm.lastModifyDate.substring(0, 2) - this.addBookForm.createDate.substring(0, 2)
                console.log(this.addBookForm.lastModifyDate.substring(0, 2))
                console.log(this.addBookForm.createDate.substring(0, 2))
                console.log(time)
                if (time == 2) {
                    this.addBookForm.price = 200
                } else if (time == 4) {
                    this.addBookForm.price = 400
                } else if (time == 6) {
                    this.addBookForm.price = 600
                } else this.addBookForm.price = 800

            },
            cleanTime() {
                this.addBookForm.lastModifyDate = '';
                this.addBookForm.price = '';
            },

            /*提交添加*/
            addBookInfo() {
                let url = "/houseService/addNewHouseServiceOrder"
                axios.get(url, {
                    params: {
                        areasCode:this.areaInfo,
                        streetsCode:this.streetsInfo,
                        Address: this.addBookForm.Address,
                        createDate: this.addBookForm.createDate,
                        lastModifyDate: this.addBookForm.lastModifyDate,
                        BookDay: this.addBookForm.BookDay,

                    }
                }).then((res) =>{
                    console.log(res)
                    if (res.data =='ok'){
                        this.$message({
                            message: '恭喜你，预约成功!',
                            type: 'success'
                        });
                        this.closeBookForm();
                    }else {
                        this.$message.error(res);
                    }
                })

            },
            closeBookForm() {
                this.openBookFormVisible = false
            },
            openBookForm() {
                this.openBookFormVisible = true
            },
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            }
        },
        created() {
            this.searchAreas();
        }
    })
</script>
</html>